<template>
  <div>
    <TheCreateForm
      ref="formRefs"
      title="新增保证金退款"
      :api="formAPi"
      :options="formOption"
      :form.sync="ruleForm"
      :autoClose="false"
      tip="提交后不可修改，请确认信息无误"
      @submit="handleSubmit"
    >
      <template v-slot:workerId="{ slotProps }">
        <el-input
          placeholder="请输入内容"
          v-model="ruleForm.workerId"
          style="width: 270px"
        >
          <template slot="append">
            <div
              style="width: 100%; height: 100%; cursor: pointer"
              @click="onSearchUser"
            >
              查询
            </div>
          </template>
        </el-input>
      </template>
    </TheCreateForm>
    <TheDingAuth ref="dingAuthRefs" />
  </div>
</template>

<script>
import { apiWorkerDetail } from "@/api/worker.js";
import { apiWorkerSecurityDepositRefund } from "@/api/bail.js";
import TheDingAuth from "@/components/TheDingAuth/index.vue";
export default {
  components: { TheDingAuth },
  data() {
    return {
      formAPi: null,
      formOption: [
        {
          type: "input",
          field: "workerId",
          title: "师傅id",
          placeholder: "师傅id",
          maxlength: 30,
          default: "",
          slot: "workerId",
          rules: [
            { required: true, message: "请输入师傅id...", trigger: "blur" },
          ],
        },
        {
          type: "input",
          field: "workerName",
          title: "师傅姓名",
          placeholder: "师傅姓名",
          maxlength: 30,
          disabled: true,
          width: 270,
          rules: [
            { required: true, message: "请输入师傅姓名...", trigger: "blur" },
          ],
        },
        {
          type: "input",
          field: "userPhoneNumber",
          title: "手机号",
          default: "",
          placeholder: "手机号",
          maxlength: 11,
          width: 270,
          disabled: true,
          rules: [
            { required: true, message: "请输入手机号...", trigger: "blur" },
          ],
        },
     
        {
          type: "input-number",
          field: "refundAmount",
          title: "退款金额",
          default: undefined,
          width: 270,
          placeholder: "退款金额",
          min: 0,
          max: 9999999,
          controls: false,
          precision: 2,
          rules: [
            { required: true, message: "请输入退款金额...", trigger: "blur" },
            { type: "number", message: "请输入数字", trigger: "blur" },
          ],
        },
        {
          type: "upload",
          field: "refundImg",
          title: "相关凭证",
          maxlength: 1,
          default: [],
          rules: [
            { required: true, message: "请上传相关凭证...", trigger: "change" },
          ],
        },
        {
          type: "textarea",
          field: "refundRemark",
          title: "备注",
          default: "",
          placeholder: "备注...",
          maxlength: 40,
        },
      ],
      ruleForm: {},
    };
  },
  mounted() {},
  methods: {
    open() {
      this.$refs.formRefs.open();
    },
    onSearchUser() {
      apiWorkerDetail({ workerId: this.ruleForm.workerId }).then((res) => {
        this.ruleForm.workerName = res.data.workerName;
        this.ruleForm.userPhoneNumber = res.data.userPhoneNumber;
      });
    },
    handleSubmit(values) {
      this.$refs.dingAuthRefs.open((result) => {
        const params = {
          workerId: values.workerId,
          refundAmount: values.refundAmount * 100,
          refundImg: values.refundImg.join(","),
          rechargeChannel: "WORKER_SECURITY_DEPOSIT_REFUND",
          initiateDingtalkId: result.initiateDingtalkId,
          payMethod: values.payMethod,
          refundRemark: values.refundRemark,
        };
        apiWorkerSecurityDepositRefund(params).then((res) => {
          this.$message({
            type: "success",
            message: "新增成功",
          });
          this.$emit("refresh");
          this.$refs.formRefs.close();
        });
      });
    },
  },
};
</script>
